<template>
  <div class="option-editor__wrapper">
    <div class="header">
      <a-space>
        <PrototypeUpload
            :temp-type="form.tempType"
            @change="handleResultChange"
        />
      </a-space>
    </div>
    <div class="content">
      <a-form
          :model="form"
          name="file"
          :label-col="{ style: 'width: 100px' }"
      >
        <a-collapse v-model:activeKey="active">
          <a-collapse-panel key="fileConfig" header="文件配置">
            <a-row>
              <a-col :span="12">
                <a-form-item
                    label="文件名称"
                    name="fileName"
                    :rules="rules.fileName"
                >
                  <a-input
                      v-model:value="form.fileName"
                      placeholder="请输入"
                  >
                    <template #suffix>
                      <a-tooltip title="Extra information">
                        <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)"/>
                      </a-tooltip>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="组件名称"
                    name="compName"
                    :rules="rules.compName"
                >
                  <a-input
                      v-model:value="form.compName"
                      placeholder="请输入"
                  >
                    <template #suffix>
                      <a-tooltip title="Extra information">
                        <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)"/>
                      </a-tooltip>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item
                    label="模板类型"
                    name="tempType"
                    :rules="rules.tempType"
                >
                  <a-select
                      v-model:value="form.tempType"
                      :options="modelOptions"
                      placeholder="请选择"
                  />
                </a-form-item>
              </a-col>
            </a-row>

          </a-collapse-panel>

          <a-collapse-panel key="toolConfig" header="工具配置">

          </a-collapse-panel>

          <a-collapse-panel key="modelConfig" header="模型配置">
            <component
                v-if="form.tempType"
                :is="modelComponent[form.tempType]"
                @change="handleModelFormChange"
                ref="componentRef"
            ></component>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  onBeforeMount,
  ref,
  watch,
  shallowRef,
  markRaw
} from 'vue'

import PrototypeUpload from './components/PrototypeUpload/index.vue'

import {
  AppstoreAddOutlined,
  FontSizeOutlined,
  VideoCameraOutlined,
  SaveOutlined,
  MergeCellsOutlined,
  InfoCircleOutlined,
  GlobalOutlined,
  CloudUploadOutlined,
  LoadingOutlined
} from '@ant-design/icons-vue'

import {storeToRefs} from 'pinia'
import {useModelStore} from '@/store/modules/model'
import moment from 'moment'

const store = useModelStore()
const storeRef = storeToRefs(store)

const componentRef = ref()

import models from '@/build/model'

const active = ref([
  'fileConfig',
  'modelConfig'
])

// 表单
const form = ref({
  // 文件名称
  fileName: 'index.vue',
  // 组件名称
  compName: 'Index',
  // 模板类型
  tempType: null
})

// 校验规则
const rules = {
  fileName: [{required: true, message: '请输入文件名称'}],
  compName: [{required: true, message: '请输入组件名称'}],
  tempType: [{required: true, message: '请选择模板类型'}]
}

const modelOptions = ref([])

const modelComponent = shallowRef({})


onBeforeMount(() => {
  modelOptions.value = Object.keys(models).map(key => ({
    label: models[key].modelName,
    value: models[key].modelKey,
    ...models[key]
  }))

  modelComponent.value = Object.keys(models).reduce((prev, key) => {
    prev[key] = models[key].modelViewer
    return prev
  }, {})

  if (modelOptions.value.length) {
    form.value.tempType = modelOptions.value[0].value
  }
})

watch(form, val => {
  storeRef.fileConfig.value = val
}, {deep: true})

const handleModelFormChange = form => {
  storeRef.modelConfig.value = form
}

const handleResultChange = val => {
  console.log('handleResultChange', val, componentRef.value)

  componentRef.value.setForm(val.modelConfig)

  // form.value.field = val.field
  // form.value.gird = val.gird
}

</script>

<style lang="scss" scoped>
.option-editor__wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;

  .header {
    width: 100%;
    height: 48px;
    border-bottom: 1px solid #DCDFE6;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
  }

  .content {
    width: 100%;
    flex: 1 0 0;
    padding: 10px;
    overflow-y: auto;
  }
}
</style>
